<template>
  <div class="screen-container">
    <div class="tuguan_mask"></div>
    <div class="tuguan-map" id="tgContainer"></div>
    <div class="screen-main">
      <div class="screen-title">
        <div class="title-text">
          <h1><img src="../../assets/images/screen-title-text.png" alt=""></h1>
        </div>
        <div class="time-weather">
          <div class="time">14:25:58</div>
          <div class="content">
            <div class="date">2022年08月19日</div>
            <div class="weather">
              <i></i>
              <span>晴</span>
              <span>23℃</span>
            </div>
          </div>
        </div>
      </div>
      <div class="main-content">
        <div class="content-wrap left-wrap">
          <div class="wrap-content">
            <div class="content-title">口岸介绍</div>
            <div class="content-item">
              <h2>
                <img src="../../assets/images/icon-title01.png" alt="">
                口岸简介
              </h2>
              <div class="item-main item-main01">
                <img src="../../assets/images/door.jpg" alt="">
                <p>{{descContent}}</p>
              </div>
            </div>
            <div class="content-item">
              <h2>
                <img src="../../assets/images/icon-title02.png" alt="">
                贸易产品
              </h2>
              <div class="item-main item-main02">
                <div class="form-content">
                  <select v-model="tradeValue">
                    <option v-for="item in tradeOptions" :value="item.value" :key="item.value">{{item.name}}</option>
                  </select>
                </div>
                <div class="product-list">
                  <div 
                    class="product-item" 
                    v-for="item in tradeProdList"
                    :key="item.rank"
                  >
                    <div class="item-name">
                      <i>{{item.rank}}</i>
                      <span>{{item.name}}</span>
                      <b><i :class="['iconfont',{'icon-arrow':item.status===1,'icon-arrow-down':item.status===0}]"></i></b>
                    </div>
                    <div class="item-main">
                      <div class="item-process">
                        <div class="process-line" :style="{'width':`${item.percent}%`}"></div>
                      </div>
                      <div class="count">{{item.count}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="content-item img-earth">
              <h2>
                <img src="../../assets/images/icon-title03.png" alt="">
                辐射区域
              </h2>
              <div class="item-main item-main03">
                <div class="total-count">
                  <div class="total">
                    <h2>{{cityRange.name}}</h2>
                    <div class="count">
                      <span>{{cityRange.count}}</span>
                      <b><i :class="['iconfont',{'icon-arrow':cityRange.status===1,'icon-arrow-down':cityRange.status===0}]"></i></b>
                      <small>{{cityRange.percent}}%</small>
                    </div>
                  </div>
                </div>
                <div class="tab-list">
                  <div class="tab">
                    <span>出入境人员城市</span>
                    <span>跨境贸易城市</span>
                  </div>
                  <div class="list">
                    <div 
                      class="item"
                      v-for="item in cityRangeList"
                      :key="item.rank"
                    >
                      <div class="left">
                        <i>{{item.rank}}</i>
                        <span>{{item.name}}</span>
                        <b>{{item.count}}</b>
                      </div>
                      <div class="right">
                        <span>
                          <small><i :class="['iconfont',{'icon-arrow':item.status===1,'icon-arrow-down':item.status===0}]"></i></small>
                          <b>{{item.subCount}}</b>
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="content-wrap middle-wrap">
          <div class="wrap-content">
            <div class="target-list">
              <div class="target-item">
                <div class="inner">
                  <img src="../../assets/images/icon-target01.png" alt="">
                  <div class="content">
                    <h2><span>年进出口货物量</span><b>上升</b></h2>
                    <strong>25.86<small>吨</small></strong>
                  </div>
                </div>
              </div>
              <div class="target-item">
                <div class="inner">
                  <img src="../../assets/images/icon-target01.png" alt="">
                  <div class="content">
                    <h2><span>年出入境人数</span><b>上升</b></h2>
                    <strong>25.86<small>万人</small></strong>
                  </div>
                </div>
              </div>
              <div class="target-item">
                <div class="inner">
                  <img src="../../assets/images/icon-target01.png" alt="">
                  <div class="content">
                    <h2><span>年贸易总值</span><b>上升</b></h2>
                    <strong>25.86<small>万元</small></strong>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="content-wrap right-wrap">
          <div class="wrap-content">
            <div class="content-title">综合能力</div>
            <div class="content-item">
              <h2>
                <img src="../../assets/images/icon-title04.png" alt="">
                进出货物
              </h2>
              <div class="item-main item-main04">
                <div class="goods-detail">
                  <div class="goods-item goods-total">
                    <div class="goods-count">
                      <h2>进出口总量(吨)</h2>
                      <span>258,789</span>
                      <small><i class="iconfont icon-arrow"></i><b>23%</b></small>
                    </div>
                    <div class="total-detail">
                      <div class="item">
                        <h2>进口（吨）</h2>
                        <span><b>183,654</b><small>70%</small></span>
                      </div>
                      <div class="item">
                        <h2>出口（吨）</h2>
                        <span><b>183,654</b><small>30%</small></span>
                      </div>
                    </div>
                  </div>
                  <div class="goods-item goods-hushi">
                    <div class="goods-count">
                      <h2>边民互市</h2>
                      <span>258,789</span>
                      <small><i class="iconfont icon-arrow"></i><b>23%</b></small>
                    </div>
                    <div class="hushi-charts" id="huShiChart"></div>
                  </div>
                </div>
                <div class="goods-charts" id="goodsChart"></div>
              </div>
            </div>
            <div class="content-item">
              <h2>
                <img src="../../assets/images/icon-title05.png" alt="">
                进出境人员
              </h2>
              <div class="item-main item-main05">
                <div class="inout-count">
                  <div class="total">
                    <span>67,345</span>
                    <h2>出入境人员数</h2>
                  </div>
                  <div class="detail">
                    <div class="item">
                      <span>处境人员数:</span>
                      <b>136,772</b>
                      <strong>
                        <i class="iconfont icon-arrow"></i>
                        <small>23%</small>
                      </strong>
                    </div>
                    <div class="item">
                      <span>处境人员数:</span>
                      <b>136,772</b>
                      <strong>
                        <i class="iconfont icon-arrow"></i>
                        <small>23%</small>
                      </strong>
                    </div>
                  </div>
                  <div class="chart" id="inOutChart"></div>
                </div>
                <div class="inout-chart" id="inOutLineBarChart"></div>
              </div>
            </div>
            <div class="content-item">
              <h2>
                <img src="../../assets/images/icon-title06.png" alt="">
                口岸贸易
              </h2>
              <div class="item-main item-main06">
                <div class="trade-count">
                  <div class="item trade-icon"><img src="../../assets/images/icon-car.png" alt=""></div>
                  <div class="item trade-total">
                    <span>90,876</span>
                    <h2>口岸贸易(万元)</h2>
                  </div>
                  <div class="item trade-detail">
                    <div class="detail-item">
                      <span>电商贸易:</span>
                      <b>136,772</b>
                      <strong>
                        <i class="iconfont icon-arrow"></i>
                        <small>23%</small>
                      </strong>
                    </div>
                    <div class="detail-item">
                      <span>边民互市:</span>
                      <b>136,772</b>
                      <strong>
                        <i class="iconfont icon-arrow"></i>
                        <small>23%</small>
                      </strong>
                    </div>
                  </div>
                </div>
                <div class="trade-chart" id="tradeChart"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { 
  initPieChart,
  initLineBarChart
} from '../../utils/charts'
export default {
  name: 'indexPage',
  data(){
    return {
      descContent:"中国·田蓬口岸是云南省重要的国家一类公路口岸，地处两国三省三县结合部。与云桂高铁富宁站，文山机场、建设中的富宁港口、富宁平台机场及“十四五”计划建成的沿边铁路、沿边高速，组成了富宁高效便捷的陆水空立体交通网。口岸以“口岸+边民互市”“口岸+物联网”“边贸＋园区加工”等模式布局建设，是国际进出口货物的中转枢纽、越南及东盟农产品加工中心、国际旅游服务中心。口岸经济区规划范围208.04公顷，以“功能合理 、交通流畅 、集约高效”为规划设计理念，规划“双轴三区”功能布局。现有员工XX人。预计到2030年，年出入境人数30万人次，货物吞吐量达到30万吨。",
      tradeValue: 0,
      tradeOptions:[{
        value:0,
        name:"进出口主营业务0"
      },{
        value:1,
        name:"进出口主营业务1"
      },{
        value:2,
        name:"进出口主营业务2"
      }],
      tradeProdList:[{
        rank:1,
        name:"矿石",
        status:0,
        percent:79,
        count:9000
      },{
        rank:2,
        name:"木材",
        status:0,
        percent:49,
        count:9000
      },{
        rank:3,
        name:"药材",
        status:0,
        percent:69,
        count:9000
      },{
        rank:4,
        name:"建筑材料",
        status:0,
        percent:19,
        count:9000
      },{
        rank:5,
        name:"海鲜产品",
        status:1,
        percent:39,
        count:9000
      },{
        rank:6,
        name:"农业产品",
        status:1,
        percent:100,
        count:9000
      }],
      cityRange:{
        name:"辐射城市总数",
        count: 24,
        status: 1,
        percent:50
      },
      cityRangeList:[{
        rank:1,
        name:"北京",
        count:"23,456",
        status:0,
        subCount:2
      },{
        rank:2,
        name:"上海",
        count:"23,456",
        status:0,
        subCount:2
      },{
        rank:3,
        name:"广州",
        count:"23,456",
        status:1,
        subCount:2
      },{
        rank:4,
        name:"深圳",
        count:"23,456",
        status:0,
        subCount:2
      },{
        rank:5,
        name:"杭州",
        count:"23,456",
        status:0,
        subCount:2
      },{
        rank:6,
        name:"苏州",
        count:"23,456",
        status:0,
        subCount:2
      },{
        rank:7,
        name:"成都",
        count:"23,456",
        status:0,
        subCount:2
      },{
        rank:8,
        name:"重庆",
        count:"23,456",
        status:0,
        subCount:2
      },{
        rank:9,
        name:"武汉",
        count:"23,456",
        status:0,
        subCount:2
      },{
        rank:10,
        name:"长沙",
        count:"23,456",
        status:0,
        subCount:2
      }]
    }
  },
  mounted(){
    initPieChart({
      id:"huShiChart",
      text:["占比","70%"],
      data:[{
        name:"aaa",
        value:100
      },{
        name:"bbb",
        value:100
      }]
    })
    initPieChart({
      id:"inOutChart",
      text:["处境人数","23,478","占比:70%"],
      data:[{
        name:"aaa",
        value:100
      },{
        name:"bbb",
        value:100
      }]
    })

    initLineBarChart({
      id:"goodsChart"
    })
    initLineBarChart({
      id:"inOutLineBarChart"
    })
    initLineBarChart({
      id:"tradeChart"
    })
  },
  methods:{

  }
}
</script>

<style lang="scss" scoped>
$headerHeight: 80px;
.screen-container{
  height: 100%;
  background: #020B2E;
  // background-image: url(../../assets/images/screen-bg.png);
  // background-image: url(../../assets/images/screen-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
  .tuguan_mask{
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../../assets/images/tuguan-mask.png) no-repeat center center / 100% 100%;
    z-index: 5;
  }
  .tuguan-map{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    // background: rgba(255,0,0,.2);
  }
  .screen-main{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 9;
    pointer-events: none;
  }
  .screen-title{
    height: $headerHeight;
    background-image: url(../../assets/images/title-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 100%;
    position: relative;
    .title-text{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      h1{
        color: #fff;
        font-weight: normal;
        font-size: 32px;
        img{
          display: block;
          height: 50px;
        }
      }
    }
    .time-weather{
      position: absolute;
      top: 0;
      right: 20px;
      z-index: 1;
      height: 100%;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      .time{
        font-size: 28px;
        margin-right: 10px;
      }
      .content{
        .date{
          font-size: 12px;
        }
        .weather{
          display: flex;
          align-items: center;
          justify-content: flex-start;
          i{
            $width: 16px;
            width: $width;
            height: $width;
            background: {
              image: url(../../assets/images/icon-sunny.png);
              repeat: no-repeat;
              position: center;
              size: contain;
            }
          }
          span{
            font-size: 12px;
            margin-left: 10px;
          }
        }
      }

    }
  }
  .main-content{
    box-sizing: border-box;
    height: calc(100vh - #{$headerHeight});
    padding: 40px;
    display: flex;
    .content-wrap{
      box-sizing: border-box;
      height: 100%;
      .wrap-content{
        width: 100%;
        height: 100%;
        .content-title{
          height: 32px;
          font-size:20px;
          line-height: 32px;
          color: #fff;
          background: linear-gradient(to right,rgba(3,112,265,.5),rgba(3,112,265,0));
          padding-left: 15px;
          position: relative;
          &::after{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 10px;
            height: 100%;
            background: url(../../assets/images/title-light.png) no-repeat left center / contain;
          }
        }
        .content-item{
          // background-color: rgba(0,0,0,.3);
          margin-top: 10px;
          height: calc((100% - 32px - 20px)/3);
          box-sizing: border-box;
          padding: 10px 20px;
          pointer-events: all;
          &:first-child{
            margin-top: 0;
          }

          &.img-earth{
            background-image: url(../../assets/images/img-earth.png);
            background-repeat: no-repeat;
            background-position: left bottom;
            background-size: 274px auto;
          }
          h2{
            height: 16px;
            font-weight: normal;
            font-size: 14px;
            color: #fff;
            margin: 0;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            img{
              display: block;
              height: 16px;
              margin-right: 6px;
            }
          }
          .item-main{
            height: calc(100% - 16px);
            box-sizing: border-box;
            &.item-main01{
              box-sizing: border-box;
              height: 100%;
              padding: 30px 0;
              display: flex;
              justify-content: space-between;
              align-items: center;
              img{
                height: 100%;
                opacity: .8;
              }
              p{
                margin: 0;
                height: 100%;
                overflow: auto;
                color: #fff;
                margin-left: 20px;
                font-size: 14px;
              }
            }
            &.item-main02{
              .form-content{
                display: flex;
                justify-content: flex-end;
                align-items: center;
                height: 30px;
                select{
                  background: none;
                  color: #fff;
                  border: 1px solid #fff;
                  border-radius: 4px;
                  outline: none;
                  font-size: 12px;
                }
              }
              .product-list{
                box-sizing: border-box;
                height: calc(100% - 30px);
                overflow: auto;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                padding-top: 20px;
                .product-item{
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  width: 100%;
                  .item-name{
                    width: 100px;
                    flex-shrink: 0;
                    flex-grow: 0;
                    color: #fff;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    > i{
                      display: block;
                      width: 20px;
                      height: 20px;
                      border-radius: 50%;
                      background: linear-gradient(to top,#66a6ff,#6bd6dd);
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      font-style: normal;
                    }
                    span{
                      margin-left: 8px;
                      white-space: nowrap;
                    }
                    b{
                      transform: scale(.8);
                      i{
                        font-size: 12px;
                        color: #00ff00;
                        &.icon-arrow-down{
                          color: #ff0000;
                        }
                      }
                    }
                  }
                  .item-main{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    flex-grow: 1;
                    .item-process{
                      height: 6px;
                      background: #253e64;
                      border-radius: 20px;
                      flex-grow: 1;
                      .process-line{
                        height: 100%;
                        width: 50%;
                        border-radius: 10px;
                        background: linear-gradient(to right,rgba(109,205,230,.3),rgba(109,205,230,1));
                      }
                    }
                    .count{
                      width: 50px;
                      text-align: right;
                      flex-shrink: 0;
                      flex-grow: 0;
                      color: #6dcde6;
                    }
                  }
                  &:nth-child(1){
                    .item-name{
                      > i{
                        background: linear-gradient(to top,#aa0b0a,#f73333);
                      }
                    }
                    .item-main{
                      .item-process{
                        .process-line{
                          background: linear-gradient(to right,rgba(179,1,1,.3),rgba(179,1,1,1));
                        }
                      }
                    }
                    .count{
                      color: #ff3737;
                    }
                  }
                  &:nth-child(2){
                    .item-name{
                      > i{
                        background: linear-gradient(to top,#aa610a,#f78f33);
                      }
                    }
                    .item-main{
                      .item-process{
                        .process-line{
                          background: linear-gradient(to right,rgba(255,115,54,.3),rgba(255,115,54,1));
                        }
                      }
                    }
                    .count{
                      color: #ff7e00;
                    }
                  }
                  &:nth-child(3){
                    .item-name{
                      > i{
                        background: linear-gradient(to top,#d5a81d,#ffc000);
                      }
                    }
                    .item-main{
                      .item-process{
                        .process-line{
                          background: linear-gradient(to right,rgba(255,192,0,.3),rgba(255,192,0,1));
                        }
                      }
                    }
                    .count{
                      color: #ff7e00;
                    }
                  }
                }
              }
            }
            &.item-main03{
              display: flex;
              .total-count{
                width: 50%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: flex-start;
                .total{
                  margin-top: 40px;
                  color: #fff;
                  h2{
                    font-size: 16px;
                    color: #fff;
                    margin-bottom: 10px;
                  }
                  .count{
                    display: flex;
                    justify-content: center;
                    align-items: baseline;
                    span{
                      font-size: 40px;
                      margin-right: 6px;
                    }
                    b{
                      transform: scale(.8);
                      i{
                        color: #00ff00;
                        &.icon-arrow-down{
                          color: #ff0000;
                        }
                      }
                    }
                    small{
                      font-size: 14px;
                    }
                  }
                }
              }
              .tab-list{
                width: 50%;
                height: 100%;
                color: #fff;
                .tab{
                  width: 100%;
                  height: 26px;
                  line-height: 26px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  border-bottom: 1px solid #036796;
                  position: relative;
                  &::after{
                    display: block;
                    content: "";
                    width: 50%;
                    height: 3px;
                    border-radius: 2px;
                    background: #00ffff;
                    position: absolute;
                    left: 0;
                    bottom: -2px;
                  }
                  span{
                    display: block;
                    width: 50%;
                    text-align: center;
                    font-size: 12px;
                  }
                }
                .list{
                  height: calc(100% - 26px);
                  box-sizing: border-box;
                  padding-top: 10px;
                  display: flex;
                  flex-direction: column;
                  justify-content: space-around;
                  align-items: center;
                  overflow: auto;
                  .item{
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 14px;
                    .left{
                      width: 50%;
                      display: flex;
                      justify-content: space-between;
                      align-items: center;
                      i{
                        font-style: normal;
                      }
                      span{}
                      b{
                        font-weight: normal;
                      }
                    }
                    .right{
                      display: flex;
                      align-items: center;
                      small{
                        i{
                          transform: scale(.8);
                          color: #00ff00;
                          font-size: 12px;
                          &.icon-arrow-down{
                            color: #ff0000;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
            &.item-main04{
              padding-top: 10px;
              .goods-detail{
                height: 50%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin: 0 -5px;
                .goods-item{
                  height: 100%;
                  width: 50%;
                  margin: 0 5px;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  border: 1px solid rgba(0,187,255,.5);
                  padding: 0 10px;
                  border-radius: 10px;
                  .goods-count{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    h2{
                      font-weight: normal;
                      font-weight: 20px;
                      white-space: nowrap;
                    }
                    span{
                      color: #00ffff;
                      font-size: 24px;
                      margin: 7px 0;
                    }
                    small{
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      i{
                        transform: scale(.8);
                        color: #00ff00;
                      }
                      b{
                        color: #fff;
                      }
                    }
                  }
                  &.goods-total{
                    .total-detail{
                      .item{
                        margin-top: 10px;
                        &:first-child{
                          margin-top: 0;
                        }
                        h2{
                          font-size: 12px;
                        }
                        span{
                          b{
                            font-size: 15px;
                            color: #fff;
                            margin-right: 5px;
                          }
                          small{
                            color: #add7ff
                          }
                        }
                      }
                    }
                  }
                  &.goods-hushi{
                    .hushi-charts{
                      width: 100px;
                      height: 100%;
                    }
                  }
                }
              }
              .goods-charts{
                height: 50%;
              }
            }
            &.item-main05{
              .inout-count{
                height: 50%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .total{
                  span{
                    color: #00ffff;
                    font-size: 30px;
                  }
                  h2{
                    font-size: 14px;
                    color: #fff;
                    margin-top: 5px;
                  }
                }
                .detail{
                  .item{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-top: 10px;
                    span{
                      color: #fff;
                    }
                    b{
                      color: #00ff00;
                      font-size: 14px;
                      font-weight: normal;
                      padding: 0 5px;
                    }
                    strong{
                      border: 1px solid #00ff00;
                      border-radius: 4px;
                      padding: 2px 4px;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      font-weight: normal;
                      i{
                        color: #00ff00;
                        font-size: 12px;
                        margin-right: 3px;
                      }
                      small{
                        color: #fff;
                      }
                    }
                  }
                }
                .chart{
                  width: 100px;
                  height: 100%;
                }
              }
              .inout-chart{
                height: 50%;
              }
            }
            &.item-main06{
              .trade-count{
                height: 50%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .item{
                  position: relative;
                  flex-grow: 1;
                  &::after{
                    content: "";
                    width: 1px;
                    height: 40px;
                    background: rgba(153,228,255,.5);
                    position: absolute;
                    top: 50%;
                    margin-top: -20px;
                    left: 0;
                  }
                  &:first-child{
                    &::after{
                      display: none;
                    }
                  }
                  &.trade-icon{
                    img{
                      display: block;
                      width: 55px;
                    }
                  }
                  &.trade-total{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    span{
                      font-size: 30px;
                      line-height: 30px;
                      color: #00ffff;
                    }
                    h2{
                      color: #fff;
                    }
                  }
                  &.trade-detail{
                    .detail-item{
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      margin-top: 10px;
                      &:first-child{
                        margin-top: 0;
                      }
                      span{
                        color: #fff;
                      }
                      b{
                        color: #00ff00;
                        font-size: 14px;
                        font-weight: normal;
                        padding: 0 5px;
                      }
                      strong{
                        border: 1px solid #00ff00;
                        border-radius: 4px;
                        padding: 2px 4px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-weight: normal;
                        i{
                          color: #00ff00;
                          font-size: 12px;
                          margin-right: 3px;
                        }
                        small{
                          color: #fff;
                        }
                      }
                    }
                  }
                }
              }
              .trade-chart{
                height: 50%;
              }
            }
          }
        }
      }
      &.left-wrap{
        width: 460px;
      }
      &.middle-wrap{
        width: calc(100vw - 960px);
        padding: 0 10px;
        .target-list{
          display: flex;
          justify-content: space-around;
          align-items: center;
          .target-item{
            border-radius: 10px;
            background:linear-gradient(to top,#DFF7FF,#020B2E) ;
            padding: 1px;
            .inner{
              background-clip:padding-box;
              box-sizing: border-box;
              display: flex;
              justify-content: center;
              align-items: center;
              padding: 20px;
              background: rgba(2,11,46,0.9);
              border-radius: 10px;
            }
            img{
              display: block;
              width: 62px;
              margin-right: 20px;
            }
            .content{
              color: #fff;
              h2{
                font-size: 16px;
                font-weight: normal;
                margin: 0;
                span{
                  color: #bddbff;
                  vertical-align: middle;
                  margin-right: 5px;
                }
                b{
                  font-size: 12px;
                  background: #e79524;
                  padding:1px 5px;
                  border-radius: 20px;
                  vertical-align: middle;
                }
              }
              strong{
                font-size: 32px;
                font-weight: normal;
                small{
                  margin-left: 5px;
                  color: #bddbff;
                  font-size: 16px;
                }
              }
            }
          }
        }
      }
      &.right-wrap{
        width: 500px;
      }
    }
    
  }
}
</style>